<template>
  <div>
    <el-row v-for="item in dispatchData" :key="item.orderFlowId">
      <el-row v-if="item.acceptProcessName">
        <el-col :span="24">
          <el-col :span="12">
            <el-row>
              <el-col :span="leftLabelSpan" class="rowTitle">受理人：</el-col>
              <el-col
                :span="24 - leftLabelSpan"
                class="rowValue"
                :title="item.acceptProcessName"
                >{{ item.acceptProcessName }}</el-col
              >
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="leftLabelSpan" class="rowTitle">受理时间：</el-col>
              <el-col
                :span="24 - leftLabelSpan"
                class="rowValue"
                :title="
                  item.enableAcceptanceMode === '2'
                    ? item.flowEndTime
                    : item.flowNodeTime
                "
                >{{
                  item.enableAcceptanceMode === "2"
                    ? item.flowEndTime
                    : item.flowNodeTime
                }}</el-col
              >
            </el-row>
          </el-col>
        </el-col>
      </el-row>
      <el-row v-if="item.flowEndTime">
        <el-row>
          <el-col :span="24">
            <el-col :span="12">
              <el-row>
                <el-col :span="leftLabelSpan" class="rowTitle">操作人：</el-col>
                <el-col :span="24 - leftLabelSpan" class="rowValue">{{
                  item.processName
                }}</el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row>
                <el-col :span="leftLabelSpan" class="rowTitle"
                  >操作时间：</el-col
                >
                <el-col
                  :span="24 - leftLabelSpan"
                  class="rowValue"
                  :title="item.flowEndTime"
                  >{{ item.flowEndTime }}</el-col
                >
              </el-row>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-col :span="12">
              <el-row>
                <el-col :span="leftLabelSpan" class="rowTitle"
                  >{{
                    flowLinkTypeNameFun(
                      item.flowLinkType == 0
                        ? item.flowLinkType - 1
                        : item.flowLinkType
                    )
                  }}环节：</el-col
                >
                <el-col
                  :span="24 - leftLabelSpan"
                  class="rowValue"
                  :title="item.nextLinkName"
                  >{{ item.nextLinkName }}</el-col
                >
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row v-show="showProcessName(item)">
                <el-col :span="leftLabelSpan" class="rowTitle">处理人：</el-col>
                <el-col
                  :span="24 - leftLabelSpan"
                  class="rowValue"
                  :title="item.nextLinkProcessName"
                  >{{ item.nextLinkProcessName }}</el-col
                >
              </el-row>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-row>
              <el-col :span="leftLabelSpan" class="rowTitle"
                >{{
                  item.flowLinkType == "0"
                    ? "任务描述"
                    : flowLinkTypeNameFun(item.flowLinkType) + "说明"
                }}：</el-col
              >
              <el-col :span="24 - leftLabelSpan" class="rowValue">
                <p class="hiddenText" :title="item.remark">{{ item.remark }}</p>
                <audioPlay v-if="item.voice" :voice="item.voice"></audioPlay
              ></el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="annex-top">
          <el-col :span="24" v-if="item.orderFileList.length > 0">
            <el-col :span="leftLabelSpan" class="rowTitle">附件：</el-col>
            <el-col :span="24 - leftLabelSpan" class="rowValue">
              <EventFileUpload :value="item.orderFileList" disabled />
            </el-col>
          </el-col>
        </el-row>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-col
            :span="24"
            v-if="
              item.nextLinkId == 6 ||
              item.nextLinkId == 0 ||
              item.nextLinkId == 7
            "
          >
            <el-row>
              <el-col :span="leftLabelSpan" class="rowTitle">关闭说明：</el-col>
              <el-col
                :span="24 - leftLabelSpan"
                class="rowValue"
                :title="item.closeRemark"
                >{{ item.closeRemark }}</el-col
              >
            </el-row>
          </el-col>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>
<script>
import audioPlay from "@/components/eventManagement/audioPlay";
import EventFileUpload from "@/views/pages/eventManagement/components/EventFileUpload.vue";
export default {
  name: "dispatchInfo",
  data() {
    return {
      leftLabelSpan: 12,
      showImgViewer: false,
      selectImgIndex: 0,
    };
  },
  components: {
    audioPlay,
    EventFileUpload,
  },
  props: {
    dispatchData: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    orderStatusFun(val) {
      switch (val.judgeResult) {
        case "0":
          return "误报";
        case "1":
          return "真警";
        case "2":
          return "重复告警";
      }
      return "";
    },
    flowLinkTypeNameFun(val) {
      switch (val) {
        case "0":
          return "调度";
        case "1":
          return "转派";
        case "2":
          return "回退";
        case -1:
          return "下一";
      }
      return "";
    },
    onPreview(index) {
      this.selectImgIndex = index;
      this.showImgViewer = true;
    },
    disableContextmenu() {
      return false;
    },
    closeViewer() {
      this.showImgViewer = false;
    },
    clickFile(item) {
      const url =
        location.origin +
        "/previewFile?url=" +
        encodeURIComponent(item.resourceUrl);
      window.open(url);
    },
  },
  computed: {
    showProcessName() {
      return (data) => {
        if (data.nextLinkId === "0") {
          // 误报完结
          return false;
        }
        if (data.nextLinkId === "6") {
          // 完结
          return false;
        }
        if (data.nextLinkId === "7") {
          // 重复告警完结
          return false;
        }
        return true;
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.annex-top {
  margin-top: 2px;
  display: flex;
  .rowValue {
    flex: 1;
  }
}
.rowTitle {
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #909399;
  line-height: 35px;
  text-align: right;
  max-width: 151px;
  white-space: nowrap;
}
.rowValue {
  line-height: 35px;
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #606266;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-img-tooltip {
  margin: -20px 0 -30px -20px;
  width: 500px;
  height: 282px;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
  border-radius: 2px;
}

.table-img {
  width: 80px;
  height: 50px;
  border-radius: 5px;
  margin-right: 10px;
}
.img-wrapper {
  height: 50px;
  width: 80px;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  cursor: pointer;
  margin-right: 10px;
}
.pic1 {
  display: flex;
  flex-wrap: wrap;
}
.file-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: relative;
  background: #f5f7fa;
  border-radius: 4px;
  overflow: hidden;
  .file-icon {
    font-size: 30px;
    color: #1890ff;
  }
  .file-title {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
    line-height: 20px;
  }
}
.hiddenText {
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
<style lang="scss">
.el-tooltip__popper.myEventListTooltip.is-light {
  background: transparent;
  border: none;
}
</style>
